<template>
  <div class="content">
    <div class="row">
      <!-- <div style="background: #ffffff; height: 66px; border: 1px solid #f2f3f5; border-radius: 2px 2px 2px 2px">
        <div class="header-content">
          <div class="headertitle">套餐频道页面名称</div>
          <el-input v-model="input" style="width: 296px" placeholder="请输入" />
          <div class="moweititle">（设计师商城频道页面和标题）</div>
        </div>
      </div> -->

      <div class="rowdowm">
        <div class="rowdowmitem">
          <div class="rowdowmchildren">
            <div class="rowdowmchildrentext">套餐风格</div>
            <el-select v-model="bunStyle" placeholder="选择套餐风格" @change="handleEnter">
              <el-option
                v-for="item in paramsOption.shop_product_style"
                :key="item.dictValue"
                :value="item.dictValue"
                :label="item.dictLabel"
              />
            </el-select>
          </div>

          <div class="rowdowmchildren">
            <div class="rowdowmchildrentext">套餐状态</div>
            <el-select v-model="status" placeholder="选择套餐状态" @change="handleEnter">
              <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
            </el-select>
          </div>

          <div class="rowdowmchildren">
            <el-input
              :prefix-icon="Search"
              v-model="bundName"
              placeholder="请输入套餐名称搜索"
              class="rowdowninput"
              @keyup.enter="handleEnter"
            />
            <el-button style="width: 84px" @click="reset" type="primary" plain>
              <el-icon><RefreshRight /></el-icon>&nbsp;&nbsp;重置</el-button
            >
          </div>
        </div>

        <div class="rowdowmitemtwo">
          <div style="margin-left: 20px; margin-right: 20px; height: 100%">
            <div class="rowdowmitemtwochildren">
              <div class="left">
                <div class="rowdowmtext">已勾选：{{ selectdata.length }}</div>
                <el-button style="margin-right: 20px" @click="batchdelect" v-if="selectdata.length !== 0" type="primary" plain
                  >批量删除</el-button
                >
                <el-checkbox
                  v-model="radio"
                  label="隐藏销售价"
                  size="large"
                  @change="handleRadioChange"
                  class="custom-checkbox"
                />
              </div>
              <div class="right">
                <el-button type="primary" style="margin-right: 20px" @click="handelClickaddtaocan">添加套餐组合</el-button>
              </div>
            </div>

            <div class="rowtable">
              <el-table
                :data="tableData"
                border
                style="width: 100%"
                :height="tableHeight(252)"
                :max-height="tableHeight(252)"
                @selection-change="handleSelectionChange"
              >
                <el-table-column type="selection" width="55" :selectable="selectable" />
                <el-table-column prop="coverImgUrl" label="图片" width="148" align="center">
                  <template #default="scope">
                    <div class="tableitem">
                      <img :src="scope.row.coverImgUrl" class="custom-img" />
                    </div>
                  </template>
                </el-table-column>
                <el-table-column prop="bundleName" label="套餐名称" width="180" align="center">
                  <template #default="scope">
                    <div class="tableitem">
                      <div class="tcmcdiv">{{ scope.row.bundleName }}</div>
                    </div>
                  </template>
                </el-table-column>
                <el-table-column prop="createTime" label="编辑时间" align="center">
                  <template #default="scope">
                    <div class="tableitem">
                      <div class="timediv">{{ scope.row.updateTime }}</div>
                    </div>
                  </template>
                </el-table-column>
                <el-table-column label="时效" width="180" align="center">
                  <template #default="scope">
                    <div class="tableitem">
                      <div class="shixiaodiv" v-if="scope.row.activityEndDate == '2099-12-30 23:59:59'">
                        <div>不限时</div>
                      </div>
                      <div class="shixiaodiv" v-if="scope.row.activityEndDate !== '2099-12-30 23:59:59'">
                        <div>{{ scope.row.activityBeginDate }}</div>
                        <div>至</div>
                        <div>{{ scope.row.activityEndDate }}</div>
                      </div>
                    </div>
                  </template>
                </el-table-column>
                <el-table-column prop="bundleStyle" label="套餐风格" align="center">
                  <template #default="scope">
                    <div class="tableitem">
                      <div class="tcfgdiv">
                        {{ useCodeArrStore().getDictName("shop_product_style", scope.row.bundleStyle) }}
                      </div>
                    </div>
                  </template>
                </el-table-column>
                <el-table-column label="包含空间项" align="center" width="240">
                  <template #default="scope">
                    <div class="tableitem">
                      <div class="bhkjxdiv">
                        <div class="xiang">{{ scope.row.spaceCount }}项</div>
                        <div class="baohan">{{ scope.row.spaceNames }}</div>
                      </div>
                    </div>
                  </template>
                </el-table-column>
                <el-table-column prop="budgetTemplateId" label="关联预算报价" align="center">
                  <template #default="scope">
                    <div class="tableitem">
                      <div class="glysbj" v-if="combineIdoptions">
                        {{
                          combineIdoptions.find(item => item.templateId == scope.row.budgetTemplateId)?.packageTotalPrice ||
                          "价格未定义"
                        }}
                      </div>
                    </div>
                  </template>
                </el-table-column>
                <el-table-column prop="status" label="开关" align="center">
                  <template #default="scope">
                    <div class="tableitem">
                      <el-switch
                        :disabled="!statusfun(scope.row)"
                        v-model="scope.row.status"
                        :active-value="1"
                        :inactive-value="0"
                        @change="statusclick(scope.row)"
                      />
                    </div>
                  </template>
                </el-table-column>
                <el-table-column label="操作" align="center">
                  <template #default="scope">
                    <div class="tableitem">
                      <div class="bianjidiv">
                        <div class="caozuo" @click="handleEdit(scope.row)">编辑</div>
                        <div class="caozuo" @click="yulan(scope.row)">预览</div>
                        <div class="caozuo" @click="delectrow(scope.row)" v-if="scope.row.status == 0">删除</div>
                      </div>
                    </div>
                  </template>
                </el-table-column>
              </el-table>
            </div>
            <div class="dowm">
              <div class="pagination">
                <el-pagination
                  v-model:current-page="paramsForm.page"
                  v-model:page-size="paramsForm.size"
                  :page-sizes="[10, 20, 100, 200]"
                  layout="total, sizes, prev, pager, next, jumper"
                  :total="total"
                  @change="changePage"
                />
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <el-dialog v-model="dialogVisible" width="400px">
      <div class="kuang">
        <div class="dialog-text">
          {{
            selectdata
              .filter(item => item.status == 0)
              .map(item => item.bundleName)
              .join(",")
          }}套餐组合
        </div>
      </div>

      <div class="dialog-tishi">您正在执行删除，删除后，将不在显示被删除的套餐模版，请谨慎操作！</div>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="cancle">取消</el-button>
          <el-button type="primary" @click="delectsure"> 确认删除 </el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import package_02 from "@/static/images/package_01.png";
import { Search } from "@element-plus/icons-vue";
import { ref, onMounted, computed } from "vue";
import { useRouter, useRoute } from "vue-router";
import {
  getPackageCombinelist,
  getBudgetQuotationList,
  delectPackCombine,
  enablePackCombine,
  disablePackCombinee,
  hidePrice,
  showPrice
} from "@/apis/budgetQuotation";
import { selectDictDataByType } from "@/apis/dict/dict";
import { ElMessage } from "element-plus";
import useCodeArrStore from "@/store/modules/select";
import { microAppMainRouter } from "@/microApp";
// 变量定义
const useRout = useRouter();
const useRoutes = useRoute();
const router = useRouter();
const bunStyle = ref("");
const status = ref("");
const bundName = ref("");

const input = ref("");
const radio = ref(true);
const dialogVisible = ref(false);
const paramsForm = ref({
  page: 1,
  size: 10
});
const total = ref(0);
const tableData = ref([]);
const options = ref([
  {
    value: 0,
    label: "停用"
  },
  {
    value: 1,
    label: "启用"
  }
]);
const combineIdoptions = ref([]);
const paramsOption = ref({});
const selectdata = ref([]);
const statusdisabled = ref(false);
const selectable = row => {
  console.log("Row status:", row.status);
  return row.status != "1";
};
const getDict = async dictType => {
  const res = await selectDictDataByType(dictType);
  paramsOption.value[dictType] = res.data;
};
const tableHeight = computed(() => num => {
  return document.body.offsetHeight - 90 - num;
});
onMounted(() => {
  //获取模板列表
  getList();
  gettablist();
  const dictArr = ["shop_product_style"];
  dictArr.forEach(item => {
    getDict(item);
  });
});
//字符串2024-10-30 12:00:00格式获取时间戳
const gettimestamp = dateString => {
  return new Date(dateString).getTime();
};
const statusfun = ({ activityEndDate }) => {
  const currentDate = new Date();
  return new Date(activityEndDate) >= currentDate;
};
const yulan = row => {
  const baseRouter = window.microApp.router.getBaseAppRouter();
  const routeUrl = baseRouter.resolve({
    path: "/designer/combo-price/details",
    query: { templateId: row.budgetTemplateId, ovTime: gettimestamp(row.activityEndDate), combineId: row.combineId }
  });
  window.open(routeUrl.href, "_blank");
};
const handleRadioChange = () => {
  radio.value === true ? hidePrice() : showPrice();
};
const statusclick = e => {
  const data = ref({
    combineId: e.combineId
  });
  e.status == 1
    ? enablePackCombine(data.value).then(res => {
        if (res.code == 200) {
          ElMessage.success("套餐已启用");
        }
      })
    : disablePackCombinee(data.value).then(res => {
        if (res.code == 200) {
          ElMessage.success("套餐已禁用");
        }
      });
};
// 获取模板列表
const getList = async () => {
  await getBudgetQuotationList()
    .then(res => {
      combineIdoptions.value = res.data.setMealList;
    })
    .catch(err => {
      console.log(err);
    });
};
//搜索
const handleEnter = () => {
  gettablist();
};
//重置
const reset = () => {
  bunStyle.value = "";
  status.value = "";
  bundName.value = "";
  gettablist();
};
const handleSelectionChange = val => {
  selectdata.value = val;
};
const batchdelect = () => {
  dialogVisible.value = true;
};
const delectrow = row => {
  selectdata.value.push(row);
  dialogVisible.value = true;
};
const cancle = () => {
  dialogVisible.value = false;
  selectdata.value = [];
};

//shanchu
const delectsure = () => {
  let data = ref({});
  data.value.combineIds = selectdata.value.filter(item => item.status == 0).map(item => item.combineId);
  if (data.value.combineIds.length !== 0) {
    delectPackCombine(data.value).then(res => {
      dialogVisible.value = false;
      selectdata.value = [];
      ElMessage.success(res.msg);
      gettablist();
    });
  } else {
    dialogVisible.value = false;
  }
};
// 添加套餐组合
const handelClickaddtaocan = () => {
  useRout.push({
    path: "budgetpackageadd-default"
  });
};
const handleEdit = row => {
  useRout.push({
    path: "budgetpackageadd-default",
    query: {
      data: JSON.stringify(row)
    }
  });
};
const gettablist = () => {
  getPackageCombinelist(paramsForm.value.page, paramsForm.value.size, bunStyle.value, status.value, bundName.value).then(res => {
    if (res.code == 200) {
      tableData.value = res.data.records;
      total.value = res.data.total;
    }
  });
};
const changePage = (currentPage, pageSize) => {
  gettablist();
};
</script>
<style>
.custom-checkbox .el-checkbox__input {
  border-radius: 50%; /* 将边框和背景设置为圆形 */
}

.custom-checkbox .el-checkbox__inner {
  border-radius: 50%; /* 圆形边框 */
  width: 20px; /* 可用于调整大小 */
  height: 20px;
}

.custom-checkbox .el-checkbox__input.is-checked .el-checkbox__inner {
  background-color: #007bff; /* 自定义选中时的颜色 */
  border-color: #007bff; /* 自定义选中时的边框颜色 */
}

/* 调整选中后的对勾或点为居中 */
.custom-checkbox .el-checkbox__input.is-checked .el-checkbox__inner::before {
  background-color: #fff; /* 选中标记的颜色 */
  border-radius: 50%;
}
.kuang {
  width: 100%;
  display: flex;
  align-items: center; /* 垂直居中 */
  justify-content: center; /* 水平居中 */
}
.dialog-tishi {
  margin-top: 25px;
  display: flex;
  align-items: center; /* 垂直居中 */
  justify-content: center; /* 水平居中 */
  width: 338px;
  height: 40px;
  font-family: Source Han Sans, Source Han Sans;
  font-weight: 500;
  font-size: 14px;
  color: #3d3d3d;
  line-height: 20px;
  text-align: center;
  font-style: normal;
  text-transform: none;
}
.kuang .dialog-text {
  border-radius: 0px 0px 0px 0px;
  border: 1px solid #dcdfe6;
  width: 200px;
  height: 60px;
  display: flex;
  align-items: center; /* 垂直居中 */
  justify-content: center; /* 水平居中 */
  font-family: Source Han Sans, Source Han Sans;
  font-weight: 700;
  font-size: 18px;
  color: #3d3d3d;
  line-height: 26px;
  font-style: normal;
  text-transform: none;
}
.el-dialog__wrapper {
  margin: 0 !important; /* 避免浏览器默认的 margin 影响位置 */
}

.rowtable .el-table th {
  border: 0px solid #e1e6ed;
  background-color: #f2f6fc !important;
  border-bottom: 1px solid #e1e6ed !important;
  color: #4e5969;
  font-weight: 400;
}
.content .el-dialog {
  height: 290px; /* 设置模态框高度 */
  position: fixed; /* 使用固定定位 */
  top: 50%; /* 距离顶部 50% */
  left: 50%; /* 距离左侧 50% */
  transform: translate(-50%, -50%); /* 向上左偏移自身的一半，用于居中 */
  margin: 0; /* 去除默认 margin */
}
.dialog-footer {
  width: 100%;
  display: flex;
  align-items: center; /* 垂直居中 */
  justify-content: center; /* 水平居中 */
  position: fixed; /* 使用固定定位 */
  top: 75%; /* 距离顶部 50% */
}
</style>
<style lang="scss" scoped>
.tableitem {
  display: flex;
  align-items: center;
  justify-content: center; /* 水平居中对齐 */
  height: 108px;
  .tcmcdiv {
    width: 86px;
    height: 24px;
    font-family: PingFang SC, PingFang SC;
    font-weight: 400;
    font-size: 12px;
    color: #3d3d3d;
    line-height: 24px;
    text-align: left;
    font-style: normal;
    text-transform: none;
  }
  .timediv {
    width: 73px;
    height: 48px;
    font-family: PingFang SC, PingFang SC;
    font-weight: 400;
    font-size: 12px;
    color: #3d3d3d;
    line-height: 24px;
    text-align: center;
    font-style: normal;
    text-transform: none;
  }
  .shixiaodiv {
    width: 126px;
    height: 72px;
    font-family: PingFang SC, PingFang SC;
    font-weight: 400;
    font-size: 12px;
    color: #3d3d3d;
    line-height: 24px;
    text-align: center;
    font-style: normal;
    text-transform: none;
    display: flex; /* 启用Flexbox布局 */
    flex-direction: column; /* 内容竖向排列 */
    justify-content: center; /* 垂直居中对齐 */
    align-items: center; /* 水平居中对齐 */
  }
  .tcfgdiv {
    width: 24px;
    height: 24px;
    font-family: PingFang SC, PingFang SC;
    font-weight: 400;
    font-size: 12px;
    color: #3d3d3d;
    line-height: 24px;
    text-align: center;
    font-style: normal;
    text-transform: none;
  }
  .bhkjxdiv {
    display: flex; /* 启用Flexbox布局 */
    flex-direction: column; /* 内容竖向排列 */
    justify-content: center; /* 垂直居中对齐 */
    align-items: center; /* 水平居中对齐 */
    .xiang {
      height: 24px;
      font-family: PingFang SC, PingFang SC;
      font-weight: 400;
      font-size: 14px;
      color: #1a1a1a;
      line-height: 24px;
      text-align: left;
      font-style: normal;
      text-transform: none;
    }
    .baohan {
      width: 174px;
      height: 48px;
      font-family: PingFang SC, PingFang SC;
      font-weight: 400;
      font-size: 12px;
      color: #606266;
      line-height: 24px;
      text-align: center;
      font-style: normal;
      text-transform: none;
    }
  }
  .glysbj {
    width: 73px;
    height: 24px;
    font-family: PingFang SC, PingFang SC;
    font-weight: 400;
    font-size: 12px;
    color: #3d3d3d;
    line-height: 24px;
    text-align: left;
    font-style: normal;
    text-transform: none;
  }
  .bianjidiv {
    display: flex; /* 启用Flexbox布局 */
    flex-direction: column; /* 内容竖向排列 */
    justify-content: center; /* 垂直居中对齐 */
    align-items: center; /* 水平居中对齐 */
    margin-top: 10px;
    .caozuo {
      cursor: pointer;
      width: 24px;
      height: 20px;
      font-family: PingFang SC, PingFang SC;
      font-weight: 400;
      font-size: 12px;
      color: #007dff;
      line-height: 20px;
      text-align: center;
      font-style: normal;
      text-transform: none;
      margin-bottom: 20px;
    }
  }
}
.custom-img {
  width: 80px; /* 自定义宽度 */
  height: 80px; /* 自定义高度 */
  object-fit: cover; /* 保持比例并裁切多余部分 */
}
.content {
  width: 100%;
  height: 100%;
  overflow-x: auto; /* 自动显示滚动条 */
  background: #ffffff;
  box-shadow: 4px 5px 16px 0px rgba(4, 19, 74, 0.04);
  border-radius: 10px;
  margin: 10;
  .row {
    height: 100%;
    border-top-left-radius: 10px; /* 左上角圆角 */
    border-top-right-radius: 10px; /* 右上角圆角 */
    .header-content {
      display: flex; /* 启用 Flexbox */
      justify-content: flex-start; /* 横向左对齐 */
      align-items: center; /* 纵向居中 */
      height: 66px;
      margin-left: 20px;
      .headertitle {
        color: #3d3d3d;
        font-family: PingFang SC, PingFang SC;
        font-weight: 600;
        font-size: 14px;
        line-height: 22px;
        text-align: right;
        font-style: normal;
        text-transform: none;
        margin-right: 10px;
      }
      ::v-deep .el-input__inner {
        height: 32px;
        border-radius: 0px 0px 0px 0px;
        opacity: 0.9;
      }
      .moweititle {
        width: 196px;
        height: 24px;
        font-family: PingFang SC, PingFang SC;
        font-weight: 400;
        font-size: 14px;
        color: #86909c;
        line-height: 24px;
        text-align: center;
        font-style: normal;
        text-transform: none;
      }
    }
  }
  .rowdowm {
    height: 100%;
    .rowdowmitem {
      display: flex;
      flex-wrap: wrap; // 子元素换行
      gap: 20px; // 设置子元素之间的间距
      margin: 0 20px 0 20px;
      .rowdowmchildren {
        flex: 1; // 每个子元素占据可用空间
        min-width: 280px; // 确保有一个合适的最小宽度

        &:last-child {
          display: flex;
          align-items: center;

          .rowdowninput,
          el-button {
            flex-grow: 1; // 使输入框和按钮共同分配剩余空间
          }

          el-button {
            margin-right: 20px; // 注意额外添加的边距
          }
        }
      }
    }
    .rowdowmitem {
      height: 72px;
      display: flex; /* 启用 Flexbox */
      justify-content: space-between;
      gap: 20px; // 设置子元素之间的间距
      .rowdowmchildren {
        display: flex;
        justify-content: flex-start; /* 横向左对齐 */
        align-items: center; /* 纵向居中 */
        height: 66px;
        .rowdowmchildrentext {
          width: 70px;
          height: 22px;
          font-family: PingFang SC, PingFang SC;
          font-weight: 400;
          font-size: 14px;
          color: #4e5969;
          line-height: 22px;
          text-align: left;
          font-style: normal;
          text-transform: none;
          margin-right: 10px;
        }
        ::v-deep .el-input__wrapper {
          width: 240px;
          height: 32px;
          background: #f2f3f5;
          border-radius: 0px 0px 0px 0px;
        }
        ::v-deep .rowdowninput .el-input__wrapper {
          width: 240px;
          height: 32px;
          background: #ffffff;
          border-radius: 0px 4px 4px 0px;
          border: 1px solid #dcdfe6;
          margin-right: 20px;
        }
        ::v-deep .el-select__wrapper {
          // background-color: #ffffff;
          min-width: 240px;
          height: 32px;
        }
        ::v-deep .el-input__wrapper {
          // background-color: #ffffff;
          min-width: 240px;
          height: 32px;
        }
      }
    }
    .rowdowmitemtwo {
      overflow: hidden; /* 确保子元素不超出圆角边界 */
      height: calc(100% - 72px);
      width: 100%;
      .rowdowmitemtwochildren {
        height: 49px;
        display: flex;
        align-items: center; /* 垂直居中对齐 */
        justify-content: space-between;
        border-radius: 0px 0px 0px 0px;
        border: 1px solid #e1e6ed;
        .rowdowmtext {
          width: 80px;
          height: 24px;
          font-family: PingFang SC, PingFang SC;
          font-weight: 400;
          font-size: 14px;
          color: #86909c;
          line-height: 24px;
          text-align: left;
          font-style: normal;
          text-transform: none;
          margin-left: 20px;
          margin-right: 10px;
        }
        .left {
          display: flex; /* 子元素横向排列 */
          align-items: center; /* 垂直居中对齐 */
        }
        .right {
          display: flex;
          align-items: center; /* 垂直居中对齐 */
        }
      }
      .rowtable {
        width: 100%;
        overflow: auto;
        position: relative; /* 设置相对定位 */
        height: 100%;
        border-radius: 0;
        border-bottom: none;
        max-width: 100%;
      }
      .dowm {
        position: absolute; /* 设置绝对定位 */
        bottom: 0; /* 固定在底部 */
        left: 0; /* 可选：从左侧开始 */
        right: 0; /* 可选：填满整个其父容器 */
        height: 72px; /* 高度 */
        border-radius: 0; /* 圆角 */
        z-index: 100; /* 确保在其他元素之上 */
        margin-right: 20px;
      }
    }
  }
}
.pagination {
  margin-top: 20px;
  // @include flex-end;
  display: flex;
  justify-content: flex-end;
}
</style>
